<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram 7-47</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        background-color: white;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
<canvas id="circuitCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    const labelFont = 'italic 22px "Times New Roman"';
    const terminalFont = '22px Arial';
    const captionFont = '20px "SimSun", "Songti SC"';

    // --- Coordinates ---
    const termA_pos = { x: 100, y: 70 };
    const termB_pos = { x: 100, y: 300 };

    const T1 = { x: 150, y: 70 },  T2 = { x: 270, y: 70 };
    const M1 = { x: 150, y: 170 }, M2 = { x: 270, y: 170 };
    const M_junc = { x: 210, y: 170 };
    const B_junc = { x: 210, y: 300 };

    const capPlateLen = 30;
    const capGap = 10;
    
    const C1_pos = { x: 150, y: 120 };
    const C2_pos = { x: 270, y: 120 };
    const C3_pos = { x: 210, y: 235 };

    // --- Drawing Functions ---
    function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }

    function drawCapacitor(x, y, len, gap) {
        drawLine(x - len / 2, y - gap / 2, x + len / 2, y - gap / 2);
        drawLine(x - len / 2, y + gap / 2, x + len / 2, y + gap / 2);
    }
    
    function drawTerminal(x, y, label) {
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.font = terminalFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, x - 20, y);
    }
    
    // --- Draw Circuit Elements ---
    
    // Terminals
    drawTerminal(termA_pos.x, termA_pos.y, 'A');
    drawTerminal(termB_pos.x, termB_pos.y, 'B');

    // Wires
    drawLine(termA_pos.x, termA_pos.y, T2.x, T2.y);
    drawLine(termB_pos.x, termB_pos.y, B_junc.x, B_junc.y);
    
    // C1 Branch
    drawLine(T1.x, T1.y, T1.x, C1_pos.y - capGap / 2); // Wire to C1
    drawCapacitor(C1_pos.x, C1_pos.y, capPlateLen, capGap);
    drawLine(T1.x, C1_pos.y + capGap / 2, M1.x, M1.y); // Wire from C1
    
    // C2 Branch
    drawLine(T2.x, T2.y, T2.x, C2_pos.y - capGap / 2); // Wire to C2
    drawCapacitor(C2_pos.x, C2_pos.y, capPlateLen, capGap);
    drawLine(T2.x, C2_pos.y + capGap / 2, M2.x, M2.y); // Wire from C2
    
    // Middle Wire
    drawLine(M1.x, M1.y, M2.x, M2.y);
    
    // C3 Branch
    drawLine(M_junc.x, M_junc.y, M_junc.x, C3_pos.y - capGap / 2); // Wire to C3
    drawCapacitor(C3_pos.x, C3_pos.y, capPlateLen, capGap);
    drawLine(M_junc.x, C3_pos.y + capGap / 2, B_junc.x, B_junc.y); // Wire from C3

    // --- Draw Labels ---
    ctx.font = labelFont;
    ctx.textBaseline = 'middle';

    // C1 Label
    ctx.textAlign = 'right';
    ctx.fillText('C\u2081', C1_pos.x - capPlateLen / 2 - 10, C1_pos.y);
    
    // C2 Label
    ctx.textAlign = 'center';
    ctx.fillText('C\u2082', (C1_pos.x + C2_pos.x) / 2, C1_pos.y);

    // C3 Label
    ctx.textAlign = 'right';
    ctx.fillText('C\u2083', C3_pos.x - capPlateLen / 2 - 10, C3_pos.y);
    
    // --- Draw Caption ---
    ctx.font = captionFont;
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-47 图', M_junc.x, 360);

</script>
</body>
</html>